<template>
  <el-menu
    :default-active="$route.path"
    :show-timeout="200"
   
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF">
    <router-link
      v-for="item in menus"
      :to="item.path"
      :key="item.path"
      class="link-style">
      <el-menu-item :index="item.path" >
        <i :class="item.icon"/>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </router-link>

  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        {
          name: '登录',
          path: '/login',
          icon: 'el-icon-menu'
        },
        // {
        //   name: '数据透视表',
        //   path: '/pivotTable',
        //   icon: 'el-icon-menu'
        // },
        // {
        //   name: '甘特图',
        //   path: '/gantTu',
        //   icon: 'el-icon-menu'
        // },
        // {
        //   name: '可编辑表格',
        //   path: '/editTable',
        //   icon: 'el-icon-menu'
        // },
        // {
        //   name: '自定义日历显示',
        //   path: '/cusCalendar',
        //   icon: 'el-icon-menu'
        // },
        // {
        //   name: '组织机构图',
        //   path: '/orgTree',
        //   icon: 'el-icon-menu'
        // },
        {
          name: '组织机构图',
          path: '/g6tree',
          icon: 'el-icon-menu'
        },
        // {
        //   name: 'Echart数据透视表单',
        //   path: '/echartData',
        //   icon: 'el-icon-menu'
        // }
      ]
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
